/*
  学习目标： Redux设计 - 小结
    1. 文件结构 - 按功能来划分
      1.1 store/action  负责维护 action 函数、定义 actionType
      1.2 store/reducer 负责维护 reducer、 合并reducer
      1.3 store/index.js 负责创建 store
    2. action 设计
      2.1 分离：按功能模块拆分文件，例如 action/todo.js、action/user.js
      2.2 type类型：建议使用 '模块/功能' 命名，例如 "todo/add"、'user/add'
      2.3 actionType.js： 用常量维护 type 的值，方便 action和reducer 使用，
          建议都大写，参考： TODO_ADD 、 USER_ADD
    3. reducer 设计
      3.1 分离：按功能模块拆分文件，例如 reducer/todo.js、reducer/user.js
      3.2 合并：combineReducers
        const rootReducer = combineReducers( { 功能模块名: 模块Reducer, 功能模块名: 模块Reducer } )
      3.3 创建 store 时，使用根 rootReducer
*/

/*
  学习目标：Redux-中间件 - 使用logger打印高级日志
  1. 下包 导入 npm i redux-logger
  2. 通过applyMiddleware配置中间件
        口诀： 应用包住中间件,applyMiddleware(logger)
*/
/* 
  学习目标：了解-Action默认只能处理同步行为，处理异步代码报错
  💥💥 默认Action不能有异步行为，React要求是Action只是一个普通的JS对象
*/

/*
  学习目标：Redux-中间件 - 使用redux-thunk中间件处理异步action
  1. npm i redux-thunk
  2. 配置中间件
  3. 💥action返回一个异步函数（同步返回的是一个 action对象）
  4. 💥返回的异步函数形参中，获取dispatch函数，通过dispatch调用action带对象
*/

/*
  学习目标：配置redux调试工具，观察效果
  步骤：
     1. 下包 npm i redux-devtools-extension
     2. 配置
        口诀： 工具 》 应用 》 中间件
        composeWithDevTools(applyMiddleware(thunk, logger))
     3. chrome装插件
     4. 重启浏览器
*/

import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  // 3. Provider组件设置store属性,全局都能拿到 redux 的数据了
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
